<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加采集规则</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="/images/icon/menu_title_1.jpg" type="image/x-icon" />
</head>
<script src="/js/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.js" charset="utf-8"></script>
<script src="/js/localStorage.js" charset="utf-8"></script>
<body>
<div id="container">
    <div class="layui-form-item">
        <label class="layui-form-label">采集的字段</label>
        <div class="layui-input-block">
            <input type="text" id="field" name="title" required lay-verify="required" placeholder="请输入采集的字段名"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <select id="selectAttr" name="city" lay-verify="required">
            </select>
        </div>
    </div>
    <button id="save" class="layui-btn layui-btn-normal">保存字段</button>

</div>

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>序号</th>
        <th>列名</th>
        <th>显示顺序</th>
    </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>
</body>
<script>

    order();

    function order() {
        for(var i=1;i<=100;i++){
            var option=getJointElement("<option value='",
                i,
                " '>",
                i,
                "</option>");//"<option value=''></option>";
            $("#selectAttr").append(option);
        }
        layui.use('form', function () {
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

            //但是，如果你的HTML是动态生成的，自动渲染就会失效
            //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
            form.render();
        });
    }

    getCollectRuleList();
    $("#save").click(function () {
        saveField();
    });

    function saveField() {
        var fieldVal = $("#field").val();
        $.ajax({
            url: serverURL+"/collector/saveField",
            type: "POST",
            data: {
                field: fieldVal,
                order:$("#selectAttr").val()
            },
            success: function (data) {
                if (data.data!=null){
                    layer.msg("添加成功!");
                }else{
                    layer.msg(data.meta);
                }
            },
            error: function (e) {
                console.log(e)
            }
        });

    }

    function getCollectRuleList() {
        $.ajax({
            url: serverURL+"/collector/fieldList",
            type: "GET",
            data: {
            },
            success: function (data) {
                if (data.data==null){
                    layer.msg(data.meta);
                    return;
                }
                for(var i=0;i<data.data.length;i++){
                    var element = getJointElement("<tr>",
                        "<td>",
                        i+1,
                        "</td>",
                        "<td>",
                        data.data[i].fieldName,
                        "</td>",
                        "<td>",
                        data.data[i].order,
                        "</td>",
                        "</tr>");
                    console.log(element);
                    $("#tbody").append(element);
                }

            },
            error: function (e) {
                console.log(e)
            }
        });

    }
</script>
</html>